<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局布局</title>
    <style>

        /*定位布局*/
        /*.fullscreen-layout {*/
        /*    position: relative;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*}*/
        /*header,*/
        /*footer,*/
        /*main {*/
        /*    position: absolute;*/
        /*    left: 0;*/
        /*    right: 0;*/
        /*}*/
        /*header {*/
        /*    top: 0;*/
        /*    height: 50px;*/
        /*    background-color: #f66;*/
        /*}*/
        /*footer {*/
        /*    bottom: 0;*/
        /*    height: 50px;*/
        /*    background-color: #66f;*/
        /*}*/
        /*main {*/
        /*    top: 50px;*/
        /*    bottom: 50px;*/
        /*    background-color: #3c9;*/
        /*}*/

        /*flex布局*/
        .fullscreen-layout{
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 400px;
        }
        header{
            height: 50px;
            background-color:#f66 ;
        }
        footer{
            height: 50px;
            background-color: #66f;
        }
        main{
            background-color: #3c9;
            flex: 1;
        }

    </style>
</head>
<body>
    <div class="fullscreen-layout">
        <header></header>
        <main></main>
        <footer></footer>
    </div>
</body>
</html>